<template>
  <div class="content">
    <p style="height: 108rpx"></p>
    <div class="tx">
      <button open-type="chooseAvatar" @chooseavatar="chooseAvatar">
        <img
          :src="updataData.avatar ? updataData.avatar : '/static/mr_tx.png'"
          alt=""
        />
      </button>
    </div>
    <button
      class="eidtTx"
      open-type="chooseAvatar"
      @chooseavatar="chooseAvatar"
    >
      更换头像
    </button>
    <div class="list_box">
      <div class="list">
        <p class="title"><span>*</span>昵称</p>
        <p class="text">
          <input
            v-model="updataData.nickname"
            type="nickname"
            placeholder="请输入昵称"
            style="text-align: right"
          />
        </p>
      </div>
      <div class="list">
        <p class="title">手机号码</p>
        <p class="text">{{ updataData.mobile }}</p>
      </div>
      <div class="list">
        <p class="title">微信号</p>
        <p class="text"><input v-model="updataData.wechatId" style="text-align: right;" placeholder="请输入微信号" type="text" /></p>
      </div>
      <!-- <div class="list">
				<p class="title">微信号</p>
				<p class="text"><input type="text" style="text-align: right;"></p>
			</div> -->
    </div>
    <u-button
      :disabled="isDisable"
      loadingMode="circle"
      :loading="isDisable"
      loadingText="保存中..."
      type="primary"
      text="保存"
      @click="submit"
    >
    </u-button>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex"
import api from "@/api"
import { Debounce } from "@/utils/utils.js"
import Config from "@/config/index.js"
export default {
  data() {
    return {
      isDisable: false, // 提交
      updataData: {
        avatar: "",
        nickname: "",
        mobile: "",
        wechatId: '', // 微信号
        firstLogin: false, // 是否第一次登录
      },
      isBack: '0', // 是否返回
    }
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.userId,
      token: (state) => state.user.token,
    }),
  },
  methods: {
    ...mapActions(["updateUserTx", "updateUserName"]),
    // validatePhone(phone) {
    //   const reg = /^1[3456789]\d{9}$/
    //   return reg.test(phone)
    // },
    // 提交
    submit: Debounce(async function () {
      if (!this.updataData.avatar) {
        this.$toast("请上传头像~")
        return
      }
      if (!this.updataData.nickname) {
        this.$toast("请输入昵称~")
        return
      }
      this.isDisable = true
      api.user.update_user(this.updataData).then((res) => {
        if (res.code == 200) {
          this.$toast("保存成功～")
          this.updateUserName(this.updataData.nickname)
          setTimeout(() => {
            this.isDisable = false
            uni.navigateBack({
              delta: 1,
            })
          }, 1000)
        } else {
          this.$toast(res.msg)
          this.isDisable = false
        }
      })
    }, 300),

    chooseAvatar(event) {
      uni.showLoading({ title: "上传中..." })
      uni.uploadFile({
        url: `${Config.apiUpload}`,
        name: "file",
        method: "POST",
        filePath: event.detail.avatarUrl,
        header: {
          Authorization: `Bearer ${this.token}`,
        },
        formData: {
          file: event.detail.avatarUrl,
        },
        success: (res) => {
          let returnData = JSON.parse(res.data)
          this.updataData.avatar = returnData.data
          uni.hideLoading()
          if (this.updataData.avatar && this.updataData.nickname) {
            api.user.update_user(this.updataData).then((res) => {
              if (res.code == 200) {
                this.isDisable = false
                this.updateUserTx(this.updataData.avatar)
              } else {
                uni.hideLoading()
                this.$toast(res.msg)
                this.isDisable = false
              }
            })
          }
        },
        fail: (err) => {
          uni.hideLoading()
          this.$toast("上传失败，请重新上传！")
        },
      })
    },

    getUserInfo() {
      api.user.sell_user({ userId: this.userId }).then((res) => {
        if (res.code == 200) {
          this.updataData.mobile = res.data.mobile
          this.updataData.avatar = res.data.avatar
          this.updataData.wechatId = res.data.wechatId === 'null' ? '' : res.data.wechatId
          if (res.data.avatar) {
            this.updataData.firstLogin = false
            this.updataData.nickname = res.data.nickname
          } else {
            this.updataData.firstLogin = true
            this.updataData.nickname = ''
          }
          console.log("获取用户信息成功", this.updataData)
        }
      })
    },
  },
  onLoad(options) {
    if (options.back) {
      this.isBack = options.back
    } else {
      this.isBack = '0'
    }
    console.log("onLoad", this.isBack)
    this.getUserInfo()
  },
}
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background: #f7f7f7;
  .tx {
    width: 176rpx;
    height: 176rpx;
    border-radius: 100rpx;
    background: #ffffff;
    box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    button {
      display: flex;
      align-items: center;
      border-radius: 100rpx;
      padding: 0;
      margin: 0;
    }
    img {
      width: 180rpx;
      height: 180rpx;
    }
  }
  .eidtTx {
    text-align: center;
    color: #999999;
    font-size: 26rpx;
    margin: 20rpx 0 56rpx 0;
    background: none;
    &::after {
      border: none;
    }
  }
  .list_box {
    margin: 0 30rpx;
    .list {
      height: 48px;
      border-radius: 4px;
      background: #ffffff;
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 26rpx;
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
      .text {
        font-weight: 400;
        flex: 1;
        text-align: right;
      }
      .title {
        width: 110rpx;
        span {
          font-size: 24rpx;
          color: red;
          margin-right: 6rpx;
        }
      }
    }
  }
  /deep/ .u-button {
    width: 92%;
    height: 96rpx;
    line-height: 96rpx;
    border-radius: 100rpx;
    background: #23ac39;
    font-size: 32rpx;
    text-align: center;
    font-weight: 500;
    color: #fff;
    border: none;
    margin: 108rpx auto 0 auto;
  }
}
</style>
